<template>
	<view class="gg-column">
		<view class="column" v-for="(item,i) in columnList" :key="i" :style="{padding,height,background:stripe?(i%2)?'#F8F8F8':'':''}">
			<slot :scope="{row:tabList[i],$index:i}">
				{{item}} 
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			prop:{
				type:String,
				default:''
			},
			label:{
				type:String,
				default:''
			},
		},
		inject:{
			tableData:{
				default:{}
			}
		},
		data(){
			return{
				columnList:[]
			}
		},
		computed:{
			padding(){
				return this.tableData.padding
			},
			height(){
				return this.tableData.height
			},
			tabList(){
				return this.tableData.list
			},
			stripe(){
				return this.tableData.stripe
			}
		},
		created() {
			this.columnList = this.tabList.map(v=>{
				return v[this.prop]
			})
		},
	}
</script>

<style lang="scss" scoped>
	.gg-column{
		.column{
			display: flex;
			justify-content: center;
			align-items: center;
			
			// border-right: 2rpx solid #F8F8F8;
			border-bottom:$uni-border;
		}
		// .column:nth-child(2n){
		// 	background: #F8F8F8;
		// }
		.column:nth-last-child(1){
			border-bottom:none;
		}

	}
</style>